<script setup>

</script>

<template>
  <div class="home-container">
    <div class="home-top">
      <div class="row-left">
        <el-row :gutter="20" :style="{width: '100%'}">
          <el-col :style="{padding: '0'}" class="gutter-row" :span="7">
            <div class="gutter-box">学习教程</div>
            <div class="gutter-href">
              <a href="https://www.macrozheng.com" target="_blank">mall学习教程</a>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" class="gutter-row" :span="7">
            <div class="gutter-box">视频教程</div>
            <div class="gutter-href">
              <a href="https://www.macrozheng.com/mall/catalog/mall_video.html" target="_blank">mall视频教程（2023）</a>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" class="gutter-row" :span="7">
            <div class="gutter-box">点Star支持项目</div>
            <div class="gutter-href">
              <a href="https://github.com/macrozheng/mall" target="_blank">mall项目</a>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" :style="{width: '100%'}">
          <el-col :style="{padding: '0'}" class="gutter-row" :span="7">
            <div class="total-frame">
              <img src="@/assets/images/home_order.png" class="total-icon" alt=""/>
              <div class="total-value">
                <span class="text-primary">今日订单总数</span>
                <span class="text-price">200</span>
              </div>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" class="gutter-row" :span="7">
            <div class="total-frame">
              <img src="@/assets/images/home_today_amount.png" class="total-icon" alt=""/>
              <div class="total-value">
                <span class="text-primary">今日销售总额</span>
                <span class="text-price">￥ 5000.00</span>
              </div>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" class="gutter-row" :span="7">
            <div class="total-frame">
              <img src="@/assets/images/home_yesterday_amount.png" class="total-icon" alt=""/>
              <div class="total-value">
                <span class="text-primary">昨日销售总额</span>
                <span class="text-price">￥ 3000.00</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-card style="width: 280px;margin: 20px auto;">
        <div style="text-align: center">
          <img width="150px" height="150px"
               src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg" alt="">
        </div>
        <div style="text-align: center">mall全套学习教程连载中！</div>
        <div style="text-align: center;margin-top: 5px">
          <span class="color-main">关注公号</span>，第一时间获取。
        </div>
      </el-card>
    </div>

    <div class="home-center">
      <div class="center-1">
        <div class="center-title">
          <span>待处理事务</span>
        </div>
        <el-row :gutter="20">
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待付款订单</span>
              <span class="font-price">(180)</span>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已完成订单</span>
              <span class="font-price">(780)</span>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待确认收货订单</span>
              <span class="font-price">(600)</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待发货订单</span>
              <span class="font-price">(380)</span>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">新缺货登记</span>
              <span class="font-price">(200)</span>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待处理退款申请</span>
              <span class="font-price">(120)</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已发货订单</span>
              <span class="font-price">(560)</span>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待处理退货订单</span>
              <span class="font-price">(30)</span>
            </div>
          </el-col>
          <el-col :style="{padding: '0'}" :span="8">
            <div class="un-handle-item">
              <span class="font-medium">广告位即将到期</span>
              <span class="font-price">(50)</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="center-2">
        <div class="center-card">
          <div class="center-title">
            <span>商品总览</span>
          </div>
          <el-row>
            <el-col :span="6" class="color-danger overview-item-value">100</el-col>
            <el-col :span="6" class="color-danger overview-item-value">400</el-col>
            <el-col :span="6" class="color-danger overview-item-value">50</el-col>
            <el-col :span="6" class="color-danger overview-item-value">500</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="overview-item-title">已下架</el-col>
            <el-col :span="6" class="overview-item-title">已上架</el-col>
            <el-col :span="6" class="overview-item-title">库存紧张</el-col>
            <el-col :span="6" class="overview-item-title">全部商品</el-col>
          </el-row>
        </div>
        <div class="center-card">
          <div class="center-title">
            <span>用户总览</span>
          </div>
          <el-row>
            <el-col :span="6" class="color-danger overview-item-value">100</el-col>
            <el-col :span="6" class="color-danger overview-item-value">200</el-col>
            <el-col :span="6" class="color-danger overview-item-value">1000</el-col>
            <el-col :span="6" class="color-danger overview-item-value">5000</el-col>
          </el-row>
          <el-row class="font-medium">
            <el-col :span="6" class="overview-item-title">今日新增</el-col>
            <el-col :span="6" class="overview-item-title">昨日新增</el-col>
            <el-col :span="6" class="overview-item-title">本月新增</el-col>
            <el-col :span="6" class="overview-item-title">会员总数</el-col>
          </el-row>
        </div>

      </div>
    </div>

    <div class="home-bottom">
      sxdcfvgrbthyn
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-container {
  padding: 30px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: #fad7d7;

  .home-top {
    display: flex;
    align-items: center;
    width: 100%;

    .row-left {
      display: flex;
      flex-direction: column;
      width: 80%;
      //background: rgba(241, 233, 194, 0.42);


      .gutter-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px;
        border: #d7d7d7 solid 1px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;

        .gutter-box {
          color: #666;
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background-color: #F2F6FC;
        }

        .gutter-href a {
          color: #3f9eff;
          height: 60px;
          line-height: 60px;
          text-align: center;
        }

        .total-frame {
          display: flex;
          align-items: center;

          img {
            width: 65px;
            height: 65px;
            margin: 20px;
          }

          .total-value {
            display: flex;
            flex-direction: column;

            .text-primary {
              font-size: 16px;
              color: #919191;
              font-weight: normal;
              margin-bottom: 5px;
            }

            .text-price {
              font-size: 16px;
              color: #6c6c6c;
            }
          }
        }
      }
    }
  }

  .home-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .center-1 {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #d7d7d7;
      margin: 10px 0;
      .el-row {
        width: 100%;
        padding: 15px;
      }

      .un-handle-item {
        height: 35px;
        margin: 0 30px;
        border-bottom: 1px solid #d7d7d7;

        .font-medium {
          padding: 20px;
          font-size: 16px;
          font-weight: bold;
          color: #666;
        }

        .font-price {
          float: right;
          color: #ec0303;
        }
      }
    }

    .center-2 {
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .el-row {
        text-align: center;
        width: 100%;
        &:nth-child(2) {
          margin: 30px 0 10px 0;
        }
        &:nth-child(3) {
          margin: 10px 0 30px 0;
        }
      }

      .center-card {
        border: 1px solid #d7d7d7;
        width: 48.5%;
        display: flex;
        flex-direction: column;
      }

    }
  }

  .center-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #F2F6FC;
    span {
      margin: 0 20px;
      font-size: 16px;
      font-weight: bold;
      color: #666;
    }
  }

  .home-bottom {
    width: 100%;
    height: 100px;
    margin: 20px 0;
    border: 1px solid #d7d7f3;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>
